<template>
  <el-row class="container">
    <el-col :span="24" class="header">
      <el-col class="logo" :class="{collapse:isCollapse}"><span :class="{hide:isCollapse}">省人协</span></el-col>
      <el-col class="tools">
        <div class="tools-content" @click.prevent="collapse">
					<i class="el-icon-s-unfold" v-if="isCollapse"></i>
          <i class="el-icon-s-fold" v-else></i>
				</div>
        <el-col :span="16" style="margin-left:50px;display:flex;align-items:center;height:100%">
          <el-breadcrumb class="breadcrumb-container" separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :class="item.path?'item-cursor':''" v-for="(item,index) in levelList" :key="index" @click.native="toPath(item)">{{item.meta.title}}</el-breadcrumb-item>
        </el-breadcrumb>
        </el-col>
      </el-col>

      <el-col class="user-info">
        <div @click="showNotice" style="position: relative;margin-right: 15px;" class="el-icon-message-solid">
          <div v-if="noticeMessageCount!=0" style="position: absolute;top: -3px;right: -12px;font-size: 12px;background-color: red;padding: 3px;border-radius: 50%">
            {{this.noticeMessageCount?this.noticeMessageCount:0}}
          </div>
        </div>
        <el-dropdown style="height:44px;">
					<span class="el-dropdown-link userinfo-inner" style="color:#fff;font-size:18px;">{{userName}}<i class="el-icon-arrow-down el-icon--right"></i></span>
					<el-dropdown-menu slot="dropdown">
            <el-dropdown-item><span @click="showModifyPwd">修改密码</span></el-dropdown-item>
						<el-dropdown-item><span @click="loginOut">退出登录</span></el-dropdown-item>
					</el-dropdown-menu>
				</el-dropdown>
      </el-col>
    </el-col>
    <el-col :span="24" class="main">
     <!-- <el-scrollbar style="height:100%"> -->
        <aside class="aside-menu" :class="{collapse:isCollapse}">
          <vue-scroll :ops="ops1">
        <el-menu
          class="el-menu"
          :collapse="isCollapse"
          :default-active="$route.path"
          unique-opened
          router
          background-color="#222d32"
          text-color="#b8c7ce"
          active-text-color="#fff"
          >
          <el-menu-item v-if="admin_info.role==1" index="/data">
            <template slot="title">
              <i class="el-icon-s-data"></i>
              <span slot="title">数据统计</span>
            </template>
          </el-menu-item>
          <el-submenu v-if="navList.length>0" v-for="(item, index) in navList" :key="index" :index="(index+2).toString()">
            <template slot="title" v-if="item.child_list.length > 0">
              <i :class="item.icon"></i>
              <span slot="title">{{item.title}}</span>
            </template>
            <el-menu-item v-for="(child, number) in item.child_list" :key="number" :index="child.link_url">
              <i :class="child.icon"></i>
              <span slot="title">{{child.title}}</span>
            </el-menu-item>
          </el-submenu>
<!--          <el-submenu index="2" >-->
<!--            <template slot="title">-->
<!--              <i class="el-icon-user"></i>-->
<!--              <span slot="title">用户管理</span>-->
<!--            </template>-->
<!--            <el-menu-item index="/customer">-->
<!--              <i class="el-icon-user"></i>-->
<!--              <span slot="title">用户列表</span>-->
<!--            </el-menu-item>-->
<!--            <el-menu-item index="/customer_vip">-->
<!--              <i class="el-icon-user"></i>-->
<!--              <span slot="title">VIP用户</span>-->
<!--            </el-menu-item>-->
<!--            <el-menu-item index="/expert">-->
<!--              <i class="el-icon-user"></i>-->
<!--              <span slot="title">专家库</span>-->
<!--            </el-menu-item>-->
<!--            <el-menu-item index="/agreement">-->
<!--              <i class="el-icon-user"></i>-->
<!--              <span slot="title">用户协议</span>-->
<!--            </el-menu-item>-->
<!--            <el-menu-item index="/authRule">-->
<!--              <i class="el-icon-user"></i>-->
<!--              <span slot="title">认证规则及权益</span>-->
<!--            </el-menu-item>-->
<!--          </el-submenu>-->

<!--          <el-submenu index="3" >-->
<!--            <template slot="title">-->
<!--              <i class="el-icon-s-order"></i>-->
<!--              <span slot="title">需求管理</span>-->
<!--            </template>-->
<!--            <el-menu-item index="/demand" >-->
<!--              <i class="el-icon-s-order"></i>-->
<!--              <span slot="title">需求列表</span>-->
<!--            </el-menu-item>-->
<!--            <el-menu-item index="/demand_type" >-->
<!--              <i class="el-icon-s-order"></i>-->
<!--              <span slot="title">需求类型</span>-->
<!--            </el-menu-item>-->

<!--          </el-submenu>-->
<!--          <el-submenu index="4" >-->
<!--            <template slot="title">-->
<!--              <i class="el-icon-orange"></i>-->
<!--              <span slot="title">资讯管理</span>-->
<!--            </template>-->
<!--            <el-menu-item index="/consultation_list" >-->
<!--              <i class="el-icon-orange"></i>-->
<!--              <span slot="title">资讯列表</span>-->
<!--            </el-menu-item>-->
<!--            <el-menu-item index="/consultation_type" >-->
<!--              <i class="el-icon-s-tools"></i>-->
<!--              <span slot="title">资讯类型管理</span>-->
<!--            </el-menu-item>-->
<!--          </el-submenu>-->
<!--          <el-submenu index="5" >-->
<!--            <template slot="title">-->
<!--              <i class="el-icon-sunny"></i>-->
<!--              <span slot="title">单位管理</span>-->
<!--            </template>-->
<!--            <el-menu-item index="/official_company" >-->
<!--              <i class="el-icon-sunny"></i>-->
<!--              <span slot="title">官方单位</span>-->
<!--            </el-menu-item>-->
<!--            <el-menu-item index="/vipCompany_list" >-->
<!--              <i class="el-icon-sunny"></i>-->
<!--              <span slot="title">会员单位</span>-->
<!--            </el-menu-item>-->
<!--            <el-menu-item index="/authCompany_list" >-->
<!--              <i class="el-icon-sunny"></i>-->
<!--              <span slot="title">认证单位</span>-->
<!--            </el-menu-item>-->
<!--            <el-menu-item index="/vipCompany_apply" >-->
<!--              <i class="el-icon-sunny"></i>-->
<!--              <span slot="title">入驻审核</span>-->
<!--            </el-menu-item>-->
<!--          </el-submenu>-->
<!--          <el-submenu index="6" >-->
<!--            <template slot="title">-->
<!--              <i class="el-icon-chat-dot-round"></i>-->
<!--              <span slot="title">认证管理</span>-->
<!--            </template>-->
<!--            <el-menu-item index="/authentication" >-->
<!--              <i class="el-icon-message"></i>-->
<!--              <span slot="title">认证审核</span>-->
<!--            </el-menu-item>-->
<!--          </el-submenu>-->
<!--          <el-submenu index="7" >-->
<!--            <template slot="title">-->
<!--              <i class="el-icon-chat-dot-round"></i>-->
<!--              <span slot="title">活动管理</span>-->
<!--            </template>-->
<!--            <el-menu-item index="/activity" >-->
<!--              <i class="el-icon-message"></i>-->
<!--              <span slot="title">活动列表</span>-->
<!--            </el-menu-item>-->
<!--            <el-menu-item index="/activity_owner" >-->
<!--              <i class="el-icon-message"></i>-->
<!--              <span slot="title">活动方</span>-->
<!--            </el-menu-item>-->
<!--          </el-submenu>-->
<!--          <el-submenu index="8" >-->
<!--            <template slot="title">-->
<!--              <i class="el-icon-message"></i>-->
<!--              <span slot="title">消息管理</span>-->
<!--            </template>-->
<!--          -->
<!--            <el-menu-item index="/system_msg_list" >-->
<!--              <i class="el-icon-message"></i>-->
<!--              <span slot="title">系统消息</span>-->
<!--            </el-menu-item>-->
<!--          </el-submenu>-->
<!--          <el-submenu index="9" >-->
<!--            <template slot="title">-->
<!--              <i class="el-icon-truck"></i>-->
<!--              <span slot="title">运营管理</span>-->
<!--            </template>-->
<!--            <el-menu-item index="/set_meal" >-->
<!--              <i class="el-icon-message"></i>-->
<!--              <span slot="title">付费套餐</span>-->
<!--            </el-menu-item>-->
<!--            <el-menu-item index="/user_right" >-->
<!--              <i class="el-icon-message"></i>-->
<!--              <span slot="title">用户权益</span>-->
<!--            </el-menu-item>-->
<!--            -->
<!--          </el-submenu>-->
<!--          <el-submenu index="10" >-->
<!--            <template slot="title">-->
<!--              <i class="el-icon-s-tools"></i>-->
<!--              <span slot="title">系统管理</span>-->
<!--            </template>-->
<!--            <el-menu-item index="/banner" >-->
<!--              <i class="el-icon-s-custom"></i>-->
<!--              <span slot="title">轮播图管理</span>-->
<!--            </el-menu-item>-->
<!--            <el-menu-item index="/character" >-->
<!--              <i class="el-icon-s-custom"></i>-->
<!--              <span slot="title">角色权限</span>-->
<!--            </el-menu-item>-->
<!--            <el-menu-item index="/administrator" >-->
<!--              <i class="el-icon-box"></i>-->
<!--              <span slot="title">管理员</span>-->
<!--            </el-menu-item>-->
<!--            <el-menu-item index="/aboutUs" >-->
<!--              <i class="el-icon-box"></i>-->
<!--              <span slot="title">关于我们</span>-->
<!--            </el-menu-item>-->
<!--            -->
<!--          </el-submenu>-->
<!--          <el-submenu index="11">-->
<!--              <template slot="title">-->
<!--              <i class="el-icon-s-tools"></i>-->
<!--              <span slot="title">账号管理</span>-->
<!--            </template>-->
<!--            <el-menu-item index="/account" >-->
<!--              <i class="el-icon-box"></i>-->
<!--              <span slot="title">我的账号</span>-->
<!--            </el-menu-item>-->
<!--          </el-submenu>-->
        </el-menu>
          </vue-scroll>
      </aside>
     <!-- </el-scrollbar> -->
     <vue-scroll :ops="ops">
      <section class="content-container">
        <el-col :span="24" class="content-wrapper">
          <transition name="fade" mode="out-in">
            <router-view></router-view>
          </transition>
        </el-col>
      </section>
     </vue-scroll>
    </el-col>
    <!-- 修改密码 -->
		<el-dialog title="修改密码" :visible.sync="modifyPwdFormVisible" width="30%">
			<el-form :model="modifyPwd" label-width="80px">
        <el-form-item label="原密码">
					<el-input type="password" v-model="modifyPwd.oldPwd" auto-complete="off"></el-input>
				</el-form-item>
        <el-form-item label="新密码">
					<el-input type="password" v-model="modifyPwd.newPwd" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="确认密码">
					<el-input type="password" v-model="modifyPwd.rePwd" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="modifyPwdFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="changePassword">提交</el-button>
			</div>
		</el-dialog>

    <!-- 通知框 -->
    <el-dialog title="通知" :visible.sync="noticeShow" width="50%">
      <div style="text-align: right;padding-bottom: 10px">
        <span @click="setAlreadyRead('')" style="padding: 5px;color: #169BD5;cursor: pointer;">全部已读</span>
      </div>
      <el-tabs type="border-card" v-model="tabName">
        <el-tab-pane name="1" label="全部" style="min-height: 200px">
          <div v-for="(item,index) in homeNoticeList" :key="index" @click="intoHomeNotice(item.link_type,item.link_id,item.id)" style="display: flex;justify-content: space-between;margin-bottom: 5px;padding: 10px 0;cursor: pointer;color: #000000">
            <span :class="{'notice-message-read':item.is_read == 1}" style="width: 80%;
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow:ellipsis;">
              {{item.content}}
            </span>
            <span :class="{'notice-message-read':item.is_read == 1}">{{item.created_at}}</span>
          </div>
          <el-col :span="24" class="footer-bar">
            <div class="page-code">
              <el-pagination
                background
                :page-size="8"
                layout="prev, pager, next"
                :total="noticeMessageTotalPage"
                @current-change="noticeMessagePageChange"
              >
              </el-pagination>
            </div>
          </el-col>
        </el-tab-pane>
        <el-tab-pane name="2" label="未读">
          <div v-for="(item,index) in homeNoticeList" :key="index" @click="intoHomeNotice(item.link_type,item.link_id,item.id)" style="display: flex;justify-content: space-between;margin-bottom: 5px;padding: 10px 0;cursor: pointer;color: #000000">
            <span style="width: 80%;
            display: inline-block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow:ellipsis;">
              {{item.content}}
            </span>
            <span>{{item.created_at}}</span>
          </div>
          <el-col :span="24" class="footer-bar">
            <div class="page-code">
              <el-pagination
                background
                :page-size="8"
                layout="prev, pager, next"
                :total="noticeMessageTotalPage"
                @current-change="noticeMessagePageChange">
              </el-pagination>
            </div>
          </el-col>
        </el-tab-pane>
      </el-tabs>
      <!--<el-table
        :data="tableData"
        style="width: 100%">
        <el-table-column
          label="logo"
          width="100">
          <template slot-scope="scope">
            <div>
              <img :src="scope.row.photo_url" alt="" style="width:60px;border-radius:50%;height:60px;object-fit:cover">
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="单位名称"
          show-overflow-tooltip
          width="180">
          <template slot-scope="scope">

            <div @click.stop="showConsultation(scope.row)" style="cursor:pointer;color:#409EFF">{{scope.row.name}}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="contact_number"
          label="联系方式"
          show-overflow-tooltip
          width="100"
        >
        </el-table-column>
        <el-table-column
          prop="created_at"
          label="提交时间"
          show-overflow-tooltip
          width="120"
        >
        </el-table-column>
        <el-table-column
          prop="status_name"
          label="审核状态"
          show-overflow-tooltip
          width="100"

        >
          <template slot-scope="scope">
            <div>
              <el-tag v-show="scope.row.status==0">未审核</el-tag>
              <el-tag type="success" v-show="scope.row.status==1">成功</el-tag>
              <el-tag type="info" v-show="scope.row.status==2">拒绝</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="审核" width='200'>
          <template slot-scope="scope">

            <el-button type='primary' v-show="scope.row.status==0" size="mini" @click="passApplication(scope.row.id)">通过
            </el-button>
            <el-button type='danger' v-show="scope.row.status==0" size="mini" @click="denyApplication(scope.row.id)">拒绝
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width='80'>
          <template slot-scope="scope">
            <el-button type='danger' size="mini" @click="delUnitSettledApply(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>-->
    </el-dialog>
  </el-row>

</template>

<script>
  import router from '../../router/index'
export default {
  data(){
    return{
      navList: [],
      levelList: [],//面包屑数据
      ops1:{
        bar:{
          showDelay: 2000,
          size:'10px',
          minSize:'0.5',
          keepShow:true,
          opacity:0
        }
      },
      ops:{
        bar:{
          showDelay: 2000,
          size:'10px',
          minSize:'0.5',
          keepShow:true
        }
      },
      isCollapse: false,
      userName:'',
      myPermissions:[],

      modifyPwdFormVisible:false,
      modifyPwd:{
        oldPwd:'',
        newPwd:'',
        rePwd: '',
      },
      noticeShow: false,
      homeNoticeList: [],
      noticeMessagePage: 1,
      noticeMessageCount: 0,
      noticeMessageTotalPage: 0,
      tabName: '1',
      noticeMessageType: '',
      message:"",
      admin_info:""
    }
  },
  mounted(){
    this.getUserInfo();
    // this.getMyPermissionList();
    this.getBreadcrumb()
    this.getBackstageSectionList();
    this.getAdminMessageList();
    this.getAdminUserInfo();
  },
  created() {
    this.message = setInterval(this.getAdminUserInfo,10000);
  },
  beforeRouteUpdate (to, from, next) {
          if(to.meta.farther_id==0){
            //一级菜单

            this.levelList=[{path:'',meta:{title:to.meta.farther_title}},{path:to.path,meta:to.meta}]
            next()
            window.sessionStorage.setItem('breadcrumb',JSON.stringify(this.levelList))
            return
          }
          // console.log(this.levelList)
          if(to.meta.title&& from.meta.id==to.meta.farther_id){
            this.levelList.push({path:to.path,meta:to.meta})
          }
          window.sessionStorage.setItem('breadcrumb',JSON.stringify(this.levelList))
          next()

  },
  methods:{
    //获取后台导航栏栏目
    async getBackstageSectionList(){
      const res = await this.$api.getBackstageSectionList();
      if(res.data.level == 'success'){
        this.navList = res.data.data
      }
    },
    //折叠导航栏
    //弹出修改密码框
    showModifyPwd(){
      this.modifyPwd.oldPwd = '';
      this.modifyPwd.newPwd = '';
      this.modifyPwd.rePwd = '';
      this.modifyPwdFormVisible = true;
    },
    //修改密码提交
    async changePassword(){
      let params = {
        oldpassword:this.modifyPwd.oldPwd,
        newpassword:this.modifyPwd.newPwd,
        repass: this.modifyPwd.rePwd,
      }
      const res = await this.$api.changePassword(params);
      if(res.data.level=='success'){
        this.$message({
          message: "修改成功,请重新登陆",
          type: 'success'
        });
        this.modifyPwdFormVisible = false;
      }else{
        this.$message({
          message: res.data.message,
          type: 'warning'
        });
      }
    },
    collapse(){
      this.isCollapse = !this.isCollapse;
    },
    //退出登陆
    loginOut(){
      this.$api.loginOut();
      window.localStorage.clear()
    },
    getUserInfo(){
      // console.log('sss')
      this.userName = window.localStorage.getItem('user_name');
      this.noticeMessageCount = window.localStorage.getItem('admin_message');
      if (this.userName=='') {

      }
      // console.log(this.userName)
    },
    async getMyPermissionList(){
      let res=await this.$api.getMyPermission()
      if(res.data.level=='success'){

        this.myPermissions=res.data.data.map(item=>{
          return item.name
        })
        // console.log(this.myPermissions,"permission")
      }else{
        this.$message({
          type:'error',
          message:res.data.message
        })
      }
    },
    canUse(name){
      if (this.myPermissions.indexOf(name) === -1) {
        return false
      } else {
        return true
      }
    },
    toPath(item){
      //面包屑条状
      if(item.path){
        if(this.$route.path!=item.path&&item.path!='/banner'){
          this.$router.push(item.path)
        }

      }
    },
    getBreadcrumb() {
      //获取当前路由
      if(window.sessionStorage.getItem('breadcrumb')){
        this.levelList=JSON.parse(window.sessionStorage.getItem('breadcrumb'));
        return
      }
          let matched = this.$route.matched.map(item =>{
              return {path:item.path,meta:item.meta}
            }
          );
          let first=matched[1];
          matched.splice(0,1,{path:'',meta:{title:first.meta.farther_title}});
          this.levelList = matched;

      },
    //获取消息通知列表
    async getAdminMessageList(){
      let param = {
        limit: 8,
        page: this.noticeMessagePage,
        type: this.noticeMessageType
      };
      const res = await this.$api.getAdminMessageList(param);
      if(res.data.level == 'success'){
        this.homeNoticeList = res.data.data;
        this.noticeMessageTotalPage = res.data.page_info.total
      }
    },
    //把消息设置为已读
    async setAlreadyRead(readId){
      const res = await this.$api.setAlreadyRead({id: readId});
      if(res.data.level=="success"){
        this.noticeMessagePage = 1;
        this.getAdminMessageList();
        this.getAdminUserInfo();
        if(!readId){
          let that = this;
          this.$message({
            duration: 1500,
            message: '已经设置全部已读',
            type: "success",
          })
        }
      }
    },
    showNotice() {
      this.noticeShow = true;
      this.getAdminMessageList();
    },
    intoHomeNotice(linkType,linkId,id) {
      this.noticeShow = false;
      if(linkType==='personal_auth'){
        router.push({path:'authentication',query:{personLinkId: linkId,linkType: 'person'}});
      } else if(linkType==='company_set'){
        router.push({path:'vipCompany_apply',query:{linkId: linkId}});
      } else if(linkType==='service'){
        router.push({path:'demand',query:{linkId: linkId}});
      } else if(linkType==='expert_auth'){
        router.push({path:'authentication',query:{expertLinkId: linkId,linkType: 'expert'}});
      }else if(linkType==='expert_order'){
        router.push({path:'expert',query:{expertLinkId: linkId,linkType: 'order_list'}});
      }else if(linkType === 'personal_auth_to_manager'){
        router.push({path:'vipCompany_staff_examine',query:{id: linkId}});
      }
      this.setAlreadyRead(id);
    },
    //获取管理员信息
    async getAdminUserInfo(){
      let params = {
        user_token: window.localStorage.getItem('user_token'),
      }
      const res = await this.$api.getAdminUserInfo(params);
      console.log("res",res)
      if(res.data.level=='success'){
        this.noticeMessageCount = res.data.admin_message;
        this.admin_info = res.data.data;
      }else{

      }
    },
    noticeMessagePageChange(e) {
      this.noticeMessagePage = e;
      this.getAdminMessageList();
    }
  },
  watch: {
    'tabName':function (val) {
      if(this.tabName==='1'){
        this.noticeMessageType = '';
      } else if(this.tabName==='2'){
        this.noticeMessageType = 0
      }
      this.noticeMessagePage = 1;
      this.getAdminMessageList();
    }
  }
}
</script>
<style lang='scss' scoped>
  @import '../../assets/css/vars.scss';
  .container{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    .header{
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 24px;
      color: #fff;
      background-color: $color-primary;
      display: flex;
      .logo{
        width: 230px;
        height: 100%;
        font-size: 20px;
        border-right:1px solid #eef1f6;
        transition: all .3s linear;
      }
      .tools{
        height: 100%;
        flex: 4;
        position: relative;
        .tools-content{
          height: 50px;
          line-height: 50px;
          position: absolute;
          left:10px;
          cursor: pointer;
        }
      }
      .user-info{
        height: 100%;
        flex: 1
      }
    }
    .main{
      display: flex;
      position: absolute;
      top: 50px;
			bottom: 0px;
      overflow: hidden;
      .aside-menu{
        width: 269px;
        // height: 100vh;
        transition: all .3s linear;
        background:#222d32;
        // overflow-x: hidden;
      }
      .content-container{
        flex: 1;
        background: #fff;
				padding: 20px;
        // overflow-y: scroll;
        .breadcrumb-container{
          display: flex;
          justify-content: space-between;
          align-items: center;
          .breadcrumb-name{
            font-weight: bolder;
            color: #fff;
          }
        }
      }
    }
    .collapse{
      width: 65px !important;
    }
    .hide{
      display: none !important;
    }
    .dialog-footer{
			text-align: center;
		}
  }
</style>

<style lang="scss">
@import '../../assets/css/vars.scss';
  .el-menu{
    border-right:1px solid #222d32;
  }
  .el-menu-item.is-active{
    background-color:$navbar-background!important;
  }
  .el-breadcrumb__inner{
    color:#fff !important;
  }
  .item-cursor{
    cursor: pointer;
  }
  .notice-message-read{
    color: gray;
  }
</style>
